<script setup lang="ts">
defineOptions({
  name: "statusChangeInfo"
});

import { ref, onMounted, computed, inject } from "vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import { ReTag } from "@/components/ReTags";
import { queryFabDetailParamsStatus } from "@/api/modules/fab";
import { useElementSize } from "@vueuse/core";

const routerQuery = inject("routerQuery", ref<Record<string, any>>({}));

const dashed_height = ref<string>("74px");
const solid_height = ref<string>("114px");
const title = ref<string>("状态转化信息");
const data = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const date = ref<Array<any> | null>([]);
const statusChangeInfoRef = ref<HTMLElement>(null);

const { height } = useElementSize(statusChangeInfoRef);

const scrollbarHeight = computed(() => `${height.value - 44}px`);

const queryFabDetailParamsStatusFn = async () => {
  loading.value = true;
  const { eqpId = "" } = routerQuery.value;
  const params = { eqpId };
  if (date.value?.length) {
    const [dateTimeStart, dateTimeEnd] = date.value;
    params["dateTimeStart"] = dateTimeStart;
    params["dateTimeEnd"] = dateTimeEnd;
  }
  const res = await queryFabDetailParamsStatus(params, () => {
    loading.value = false;
  });
  loading.value = false;
  if (!res) return;
  const p = res.reduce(
    (pre, cur, index) => {
      const { stateType } = cur;
      if (stateType === "FEATURE") {
        if (index > 0) {
          pre.dashed += 40;
        }
      } else if (stateType === "HISTORY") {
        pre.soild += 40;
      }
      return pre;
    },
    { dashed: 0, soild: 0 }
  );
  const { dashed = 0, soild = 0 } = p;
  dashed_height.value = `${dashed + 14}px`;
  solid_height.value = `${soild + 14}px`;
  data.value = [...res];
};

onMounted(async () => {
  await queryFabDetailParamsStatusFn();
});
</script>

<template>
  <modelBox :title="title">
    <div ref="statusChangeInfoRef" v-loading="loading" class="status-change-info-list-content">
      <div class="search-date">
        <px-date-picker
          v-model="date"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="queryFabDetailParamsStatusFn"
        />
      </div>
      <div v-if="data?.length" class="scrollbar-data">
        <px-scrollbar :height="scrollbarHeight">
          <div class="list-content">
            <div class="list-content-left">
              <div v-for="item in data" :key="item.startTimeStr" class="list-content-left-item">
                <div v-if="item.stateType !== 'NOW'" class="left-item-item left-item-start">{{ item.startTimeStr }}</div>
                <div v-else class="left-item-item left-item-start-now">
                  <px-icon><Flag /></px-icon>
                  <span style="font-weight: 600; color: #555; letter-spacing: 4px">当前</span>
                </div>
                <div class="left-item-line" />
                <div class="left-item-item left-item-end">{{ item.endTimeStr }}</div>
              </div>
            </div>
            <div class="list-content-arrow">
              <px-icon size="90"><Top /></px-icon>
              <div class="list-content-arrow-dashed" />
              <div class="list-content-arrow-symbol" />
              <div class="list-content-arrow-solid" />
            </div>
            <div class="list-content-right">
              <div v-for="item in data" :key="item.startTimeStr" class="list-content-right-item">
                <ReTag :type="item.eqpState" size="small" />
              </div>
            </div>
          </div>
        </px-scrollbar>
      </div>
      <px-empty v-else class="px-empty-common" />
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.status-change-info-list-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding-top: 6px;

  .search-date {
    width: 100%;

    :deep(.px-date-editor) {
      width: 100%;
    }
  }

  .scrollbar-data {
    width: 100%;
    .px-scrollbar {
      width: 100%;
      // height: calc(100% - 44px);
      .list-content {
        padding-right: 10px;
        display: flex;
        gap: 16px;
        align-items: stretch;
        justify-content: space-between;

        .list-content-left {
          flex: 1;

          .list-content-left-item {
            box-sizing: border-box;
            display: flex;
            flex-wrap: nowrap;
            gap: 16px;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding: 0 12px;

            &:nth-of-type(even) {
              background-color: var(--px-color-primary-light-9);
            }

            .left-item-item {
              display: flex;
              align-items: center;
              width: fit-content;
              width: 124px;
              font-size: 13px;
              line-height: 1;
              color: #333;
              white-space: nowrap;
            }

            .left-item-start {
              justify-content: flex-start;
            }

            .left-item-start-now {
              justify-content: space-between;
              font-size: 16px;
              font-weight: 600;
              color: #555;

              .px-icon {
                font-size: 20px;
                color: var(--px-color-primary);
              }
            }

            .left-item-line {
              flex: 1;
              height: 2px;
              background-color: #aaa;
            }

            .left-item-end {
              justify-content: flex-end;
            }
          }
        }

        .list-content-arrow {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 1px;
          height: 100%;

          .px-icon {
            width: 24px;
            height: 40px;
            font-weight: 600;
            color: var(--px-color-primary-light-5);
          }

          .list-content-arrow-dashed {
            height: v-bind(dashed_height);
            border-left: 2px dashed var(--px-color-primary-light-7);
          }

          .list-content-arrow-symbol {
            width: 12px;
            height: 12px;
            background-color: var(--px-color-primary);
            border-radius: 50%;
          }

          .list-content-arrow-solid {
            height: v-bind(solid_height);
            border-left: 2px solid var(--px-color-primary);
          }
        }

        .list-content-right {
          .list-content-right-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
          }
        }
      }
    }
  }

  :deep(.is-active) {
    border: 1px solid var(--px-input-focus-border-color);
  }
}
</style>
